<template>
  <div class="common-layout linear-gradient">
    <el-container>
      <el-header class="header-container">
        <div class="headerTitle">查询条件</div>
        <div class="header-content">
          <el-form :model="headerSearchForm" label-width="auto" class="header-search-form">
            <el-form-item label="卷号">
              <el-input v-model="headerSearchForm.volumeNum" placeholder="请输入" style="width:120px" />
            </el-form-item>
            <el-form-item label="钢种">
              <el-input v-model="headerSearchForm.steelGrade" placeholder="请输入" style="width:120px" />
            </el-form-item>
            <el-form-item label="宽度分档范围" style="margin-left:25px">
              <el-select v-model="headerSearchForm.inletWidth" placeholder="请选择" style="width:180px;">
                <el-option v-for="item in widthRangeOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="厚度分档范围" style="margin-left:25px">
              <el-select v-model="headerSearchForm.entryThickness" placeholder="请选择" style="width:180px">
                <el-option v-for="item in thicknessRangeOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="开始时间" style="margin-left:5px">
              <el-date-picker v-model="headerSearchForm.start" type="datetime" class="w-15vw" placeholder="选择开始时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" style="margin-left:5px">
              <el-date-picker v-model="headerSearchForm.end" type="datetime" class="w-15vw " placeholder="选择结束时间">
              </el-date-picker>
            </el-form-item>



          </el-form>
          <div class="header-buttons">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button type="primary" @click="handleReset">重置</el-button>
          </div>
        </div>
      </el-header>
      <el-main>
        <div class="table-container-main">
          <el-table :data="tableData" :cell-class-name="bandCellClassName"
            :header-cell-style="{ background: '#eef1f6', color: '#606266', textAlign: 'center' }"
            :cell-style="{ textAlign: 'center', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: '120px' }">
            <el-table-column prop="serialNumber" label="序号" fixed="left" width="60px">
              <template #default="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="coilno" label="出口卷号" width="130" />
            <el-table-column prop="steelGrade" label="钢种" width="100" />
            <el-table-column prop="recCreateTime" label="记录时间" width="160">
              <template #default="scope">
                <span>{{ scope.row.recCreateTime ? formatDate(scope.row.recCreateTime) : '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="enWidth" label="入口宽度(mm)"  width="90"/>
            <el-table-column prop="enThick" label="入口厚度(mm)"  width="90"/>
            <el-table-column prop="exWidth" label="出口宽度(mm)"  width="90"/>
            <el-table-column prop="exThick" label="出口厚度(mm)"  width="90"/>
            <el-table-column prop="yp" label="屈服强度(MPa)" width="100"/>
            <el-table-column prop="yp" label="索引分档号">
              <el-table-column prop="ypIndex" label="钢种"  />
              <el-table-column prop="widIndex" label="宽度"  />
              <el-table-column prop="thkIndex" label="厚度"  />
            </el-table-column>

            <!-- <el-table-column label="中间辊弯辊力">
              <el-table-column prop="imbEnd1" label="S1" />
              <el-table-column prop="imbEnd2" label="2#中间辊弯辊力" />
              <el-table-column prop="imbEnd3" label="3#中间辊弯辊力" />
              <el-table-column prop="imbEnd4" label="4#中间辊弯辊力" />
              <el-table-column prop="imbEnd5" label="S5" />
            </el-table-column> -->
            <!-- <el-table-column label="轧制力(kN)">
              <el-table-column prop="rollForce1" label="S1">
                <template #default="scope">
                  <span>{{ Math.round(scope.row.rollForce1) || '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="rollForce2" label="S2">
                <template #default="scope">
                  <span>{{ Math.round(scope.row.rollForce2) || '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="rollForce3" label="S3">
                <template #default="scope">
                  <span>{{ Math.round(scope.row.rollForce3) || '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="rollForce4" label="S4">
                <template #default="scope">
                  <span>{{ Math.round(scope.row.rollForce4) || '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="rollForce5" label="S5">
                <template #default="scope">
                  <span>{{ Math.round(scope.row.rollForce5) || '-' }}</span>
                </template>
              </el-table-column>
            </el-table-column> -->
            <el-table-column label="出口厚度(mm)">
              <el-table-column prop="exiTthk1" label="S1" />
              <el-table-column prop="exiTthk2" label="S2" />
              <el-table-column prop="exiTthk3" label="S3" />
              <el-table-column prop="exiTthk4" label="S4" />
              <el-table-column prop="exiTthk5" label="S5" />
            </el-table-column>
            <el-table-column label="轧制力值(kN)">
              <el-table-column prop="rollingForceSet1" label="S1">
                <template #default="scope">
                  <span>{{ Math.round(scope.row.rollingForceSet1) * 10 || '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="rollingForceSet2" label="S2">
                <template #default="scope">
                  <span>{{ Math.round(scope.row.rollingForceSet2) * 10 || '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="rollingForceSet3" label="S3">
                <template #default="scope">
                  <span>{{ Math.round(scope.row.rollingForceSet3) * 10 || '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="rollingForceSet4" label="S4">
                <template #default="scope">
                  <span>{{ Math.round(scope.row.rollingForceSet4) * 10 || '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="rollingForceSet5" label="S5">
                <template #default="scope">
                  <span>{{ Math.round(scope.row.rollingForceSet5) * 10 || '-' }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="张力(kN)">
              <el-table-column prop="tenSion1" label="S1" />
              <el-table-column prop="tenSion2" label="S2" />
              <el-table-column prop="tenSion3" label="S3" />
              <el-table-column prop="tenSion4" label="S4" />
              <el-table-column prop="tenSion5" label="S5" />
            </el-table-column>
            <el-table-column label="前滑(%)">
              <el-table-column prop="forSlip1" label="S1">
                <template #default="scope">
                  <span>{{ scope.row.forSlip1 != null && scope.row.forSlip1 !== undefined ? (scope.row.forSlip1 *
                    100).toFixed(1) + '%' : '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="forSlip2" label="S2">
                <template #default="scope">
                  <span>{{ scope.row.forSlip2 != null && scope.row.forSlip2 !== undefined ? (scope.row.forSlip2 *
                    100).toFixed(1) + '%' : '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="forSlip3" label="S3">
                <template #default="scope">
                  <span>{{ scope.row.forSlip3 != null && scope.row.forSlip3 !== undefined ? (scope.row.forSlip3 *
                    100).toFixed(1) + '%' : '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="forSlip4" label="S4">
                <template #default="scope">
                  <span>{{ scope.row.forSlip4 != null && scope.row.forSlip4 !== undefined ? (scope.row.forSlip4 *
                    100).toFixed(1) + '%' : '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="forSlip5" label="S5">
                <template #default="scope">
                  <span>{{ scope.row.forSlip5 != null && scope.row.forSlip5 !== undefined ? (scope.row.forSlip5 *
                    100).toFixed(1) + '%' : '-' }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="入口速度(m/min)">
              <el-table-column prop="speed1" label="S1">
                <template #default="scope">
                  <span>{{ Math.round(scope.row.speed1) || '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="speed2" label="S2">
                <template #default="scope">
                  <span>{{ Math.round(scope.row.speed2) || '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="speed3" label="S3">
                <template #default="scope">
                  <span>{{ Math.round(scope.row.speed3) || '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="speed4" label="S4">
                <template #default="scope">
                  <span>{{ Math.round(scope.row.speed4) || '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="speed5" label="S5">
                <template #default="scope">
                  <span>{{ Math.round(scope.row.speed5) || '-' }}</span>
                </template>
              </el-table-column>
            </el-table-column>

            <!-- <el-table-column label="摩擦系数">
              <el-table-column prop="fricTionCoef1" label="S1" />
              <el-table-column prop="fricTionCoef2" label="S2" />
              <el-table-column prop="fricTionCoef3" label="S3" />
              <el-table-column prop="fricTionCoef4" label="S4" />
              <el-table-column prop="fricTionCoef5" label="S5" />
            </el-table-column> -->
            <el-table-column label="轧辊工作辊直径(mm)">
              <el-table-column prop="rollRadiu1" label="S1">
                <template #default="scope">
                  <span>{{ scope.row.rollRadiu1 != null && scope.row.rollRadiu1 !== undefined ?
                    Math.round(scope.row.rollRadiu1 * 2) : '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="rollRadiu2" label="S2">
                <template #default="scope">
                  <span>{{ scope.row.rollRadiu2 != null && scope.row.rollRadiu2 !== undefined ?
                    Math.round(scope.row.rollRadiu2 * 2) : '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="rollRadiu3" label="S3">
                <template #default="scope">
                  <span>{{ scope.row.rollRadiu3 != null && scope.row.rollRadiu3 !== undefined ?
                    Math.round(scope.row.rollRadiu3 * 2) : '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="rollRadiu4" label="S4">
                <template #default="scope">
                  <span>{{ scope.row.rollRadiu4 != null && scope.row.rollRadiu4 !== undefined ?
                    Math.round(scope.row.rollRadiu4 * 2) : '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="rollRadiu5" label="S5">
                <template #default="scope">
                  <span>{{ scope.row.rollRadiu5 != null && scope.row.rollRadiu5 !== undefined ?
                    Math.round(scope.row.rollRadiu5 * 2) : '-' }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="工作辊弯辊力">
              <el-table-column prop="wbEnd1" label="S1" />
              <el-table-column prop="wbEnd2" label="s2" />
              <el-table-column prop="wbEnd3" label="S3" />
              <el-table-column prop="wbEnd4" label="S4" />
              <el-table-column prop="wbEnd5" label="S5" />
            </el-table-column>
            <el-table-column label="功率(kW)">
              <el-table-column prop="motorPower1" label="S1" width="100">
                <template #default="scope">
                  <span>{{ calcPowerPercent(scope.row.motorPower1, true) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="motorPower2" label="S2" width="100">
                <template #default="scope">
                  <span>{{ calcPowerPercent(scope.row.motorPower2, false) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="motorPower3" label="S3" width="100">
                <template #default="scope">
                  <span>{{ calcPowerPercent(scope.row.motorPower3, false) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="motorPower4" label="S4" width="100">
                <template #default="scope">
                  <span>{{ calcPowerPercent(scope.row.motorPower4, false) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="motorPower5" label="S5" width="100">
                <template #default="scope">
                  <span>{{ calcPowerPercent(scope.row.motorPower5, false) }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="辊缝(mm)">
              <el-table-column prop="gap1" label="S1" />
              <el-table-column prop="gap2" label="S2" />
              <el-table-column prop="gap3" label="S3" />
              <el-table-column prop="gap4" label="S4" />
              <el-table-column prop="gap5" label="S5" />
            </el-table-column>
            <!-- <el-table-column label="机架辊缝差">
              <el-table-column prop="delTgap1" label="S1" />
              <el-table-column prop="delTgap2" label="S2" />
              <el-table-column prop="delTgap3" label="S3" />
              <el-table-column prop="delTgap4" label="S4" />
              <el-table-column prop="delTgap5" label="S5" />
            </el-table-column> -->
            <el-table-column label="初始压下率(比变形率)">
              <el-table-column prop="red1" label="S1" />
              <el-table-column prop="red2" label="S2" />
              <el-table-column prop="red3" label="S3" />
              <el-table-column prop="red4" label="S4" />
              <el-table-column prop="red5" label="S5" />
            </el-table-column>
            <!-- <el-table-column label="机架轧制力差">
              <el-table-column prop="delForce1" label="S1" />
              <el-table-column prop="delForce2" label="S2" />
              <el-table-column prop="delForce3" label="S3" />
              <el-table-column prop="delForce4" label="S4" />
              <el-table-column prop="delForce5" label="S5" />
            </el-table-column> -->
            <el-table-column label="压下率计算值">
              <el-table-column prop="redsFinal1" label="S1" />
              <el-table-column prop="redsFinal2" label="S2" />
              <el-table-column prop="redsFinal3" label="S3" />
              <el-table-column prop="redsFinal4" label="S4" />
              <el-table-column prop="redsFinal5" label="S5" />
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="90">
              <template #default="scope">
                <!-- <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button> -->
                <el-button type="warning" @click="handleCheck(scope.row)">查看</el-button>
                <!-- <el-button type="primary" @click="handleQuote(scope.row)">引用</el-button> -->
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination">
          <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 30, 50]" :total="pagination.total" layout="total, sizes, prev, pager, next"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </el-main>
    </el-container>
    <el-dialog v-model="dialogVisible" title="模型计算"
      style="text-align: left;width: 80%;height:90%;--el-dialog-title-font-size: 16px;margin-top:30px">
      <div style="max-height:80vh;overflow-x:hidden;padding-right:8px;">
        <!-- 基本信息 -->
        <el-row>
          <el-col style="font-size:12px">
            <div class="msg-title">基本信息</div>
          </el-col>
        </el-row>
        <el-row style="margin-top:10px;margin-left:15px">
          <el-col :span="6" v-for="item in dialogBaseInfoList" :key="item.label"
            style="font-size:12px; margin-bottom: 6px;">
            <div>
              <span>{{ item.label }}</span>
              <el-input v-model="item.value" :readonly="true" style="width:120px;height:20px;margin-left:4px;" />
            </div>
          </el-col>
        </el-row>
        <!-- 轧制规程参数表 -->
        <el-row>
          <el-col style="font-size:12px">
            <div class="msg-title">轧制规程参数</div>
          </el-col>
        </el-row>
        <el-row style="margin-top:10px;margin-left:15px">
          <el-col style="font-size:12px;">
            <el-table :data="dialogProcedureTable" style="width: 100%"
              :header-cell-style="{ background: '#2f59af', color: '#fff', fontSize: '12px' }"
              :cell-style="{ fontSize: '12px' }">
              <el-table-column prop="ITEM" label="参数名" />
              <el-table-column prop="S5" label="S5机架" />
              <el-table-column prop="S4" label="S4机架" />
              <el-table-column prop="S3" label="S3机架" />
              <el-table-column prop="S2" label="S2机架" />
              <el-table-column prop="S1" label="S1机架" />
            </el-table>
          </el-col>
        </el-row>
        <!-- 仿真计算结果表 -->
        <el-row>
          <el-col style="font-size:12px">
            <div class="msg-title">仿真计算结果</div>
          </el-col>
        </el-row>
        <el-row style="margin-top:10px;margin-left:15px">
          <el-col style="font-size:12px;">
            <el-table :data="dialogSimulationTable" style="width: 100%"
              :header-cell-style="{ background: '#2f59af', color: '#fff', fontSize: '12px' }"
              :cell-style="{ fontSize: '12px' }">
              <el-table-column prop="ITEM" label="参数名" />
              <el-table-column prop="S5" label="S5机架" />
              <el-table-column prop="S4" label="S4机架" />
              <el-table-column prop="S3" label="S3机架" />
              <el-table-column prop="S2" label="S2机架" />
              <el-table-column prop="S1" label="S1机架" />
            </el-table>
          </el-col>
        </el-row>
        <!-- Echarts 图表 -->
        <el-row style="margin-top:10px;margin-left:15px">
          <el-col style="font-size:12px;" :span="6">
            <div ref="barRef0" style="height:240px;width:420px;"></div>
          </el-col>
          <el-col style="font-size:12px;" :span="6">
            <div ref="barRef1" style="height:240px;width:420px;"></div>
          </el-col>
          <el-col style="font-size:12px;" :span="6">
            <div ref="barRef2" style="height:240px;width:420px;"></div>
          </el-col>
          <el-col style="font-size:12px;" :span="6">
            <div ref="barRef3" style="height:240px;width:420px;"></div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>


  </div>
</template>
<script lang="ts">
import { ref, reactive, onMounted, onUnmounted, nextTick, defineComponent } from 'vue';
import * as echarts from 'echarts';
import { ElMessage } from 'element-plus';
import '/@/views/RollingSimulation/rollingSimulationModelCommonStyle.less';
import { rollingSimulationApi } from '/@/api/RollingSimulation/index';
import type { EChartsOption } from 'echarts';

interface SearchForm {
  productionLine: string;
  variableDescription: string;
  variableName: string;
  start: string,
  end: string
}
const barRef0 = ref<HTMLElement | null>(null);
const barRef1 = ref<HTMLElement | null>(null);
const barRef2 = ref<HTMLElement | null>(null);
const barRef3 = ref<HTMLElement | null>(null);

let chart0: echarts.ECharts | null = null;
let chart1: echarts.ECharts | null = null;
let chart2: echarts.ECharts | null = null;
let chart3: echarts.ECharts | null = null;
const barOptions = [
  {
    title: { text: '轧制力', left: 'center', textStyle: { fontSize: 18 } },
    tooltip: { trigger: 'axis' },
    xAxis: { data: ['S5', 'S4', 'S3', 'S2', 'S1'], axisLabel: { fontSize: 16 } },
    yAxis: { name: '轧制力/kN', nameTextStyle: { fontSize: 16 }, axisLabel: { fontSize: 14 } },
    series: [{ type: 'bar', barWidth: 18, itemStyle: { color: '#2f59af' }, data: [] }]
  },
  {
    title: { text: '张力', left: 'center', textStyle: { fontSize: 18 } },
    tooltip: { trigger: 'axis' },
    xAxis: { data: ['S5', 'S4', 'S3', 'S2', 'S1'], axisLabel: { fontSize: 16 } },
    yAxis: { name: '张力/kN', nameTextStyle: { fontSize: 16 }, axisLabel: { fontSize: 14 } },
    series: [{ type: 'bar', barWidth: 18, itemStyle: { color: '#2f59af' }, data: [] }]
  },
  {
    title: { text: '速度', left: 'center', textStyle: { fontSize: 18 } },
    tooltip: { trigger: 'axis' },
    xAxis: { data: ['S5', 'S4', 'S3', 'S2', 'S1'], axisLabel: { fontSize: 16 } },
    yAxis: { name: '速度[m/min]', nameTextStyle: { fontSize: 16 }, axisLabel: { fontSize: 14 } },
    series: [{ type: 'bar', barWidth: 18, itemStyle: { color: '#2f59af' }, data: [] }]
  },
  {
    title: { text: '功率', left: 'center', textStyle: { fontSize: 18 } },
    tooltip: { trigger: 'axis' },
    xAxis: { data: ['S5', 'S4', 'S3', 'S2', 'S1'], axisLabel: { fontSize: 16 } },
    yAxis: { name: '功率/kW', nameTextStyle: { fontSize: 16 }, axisLabel: { fontSize: 14 } },
    series: [{ type: 'bar', barWidth: 18, itemStyle: { color: '#2f59af' }, data: [] }]
  }
] as any;
export default defineComponent({
  name: 'DataDictionary',
  setup() {
    function renderCharts() {
      if (barRef0.value) {
        chart0 = echarts.init(barRef0.value);
        chart0.setOption(barOptions[0]);
      }
      if (barRef1.value) {
        chart1 = echarts.init(barRef1.value);
        chart1.setOption(barOptions[1]);
      }
      if (barRef2.value) {
        chart2 = echarts.init(barRef2.value);
        chart2.setOption(barOptions[2]);
      }
      if (barRef3.value) {
        chart3 = echarts.init(barRef3.value);
        chart3.setOption(barOptions[3]);
      }
    }
    function disposeCharts() {
      chart0 && chart0.dispose();
      chart1 && chart1.dispose();
      chart2 && chart2.dispose();
      chart3 && chart3.dispose();
      chart0 = chart1 = chart2 = chart3 = null;
    }
    // 从“出口厚度”开始，按 S1~S5 为一组，交替高亮（只高亮第 0、2、4... 组）
    function bandCellClassName({ column }: { column: any }) {
      const prop: string = column?.property || '';
      // 仅处理后缀为 1-5 的机架列
      const m = prop.match(/^(.*?)([1-5])$/);
      if (!m) return '';
      const prefix = m[1];
      // 屏幕从“出口厚度”开始的 S 组顺序（与模板列顺序一致）
      const sGroupsOrder = [
        // 与模板从“出口厚度(mm)”开始的列组顺序严格一致
        'exiTthk',        // 出口厚度
        'rollingForceSet',// 轧制力值
        'tenSion',        // 张力
        'forSlip',        // 前滑
        'speed',          // 入口速度
        'rollRadiu',      // 轧辊工作辊直径
        'wbEnd',          // 工作辊弯辊力
        'motorPower',     // 功率
        'gap',            // 辊缝
        'red',            // 初始压下率(比变形率)
        'redsFinal'       // 压下率计算值
      ];
      // 参与交替高亮的组（从出口厚度开始，严格按顺序交替，包含轧辊直径）
      const bandingOrder = sGroupsOrder;
      const groupIndexFromStart = bandingOrder.indexOf(prefix);
      if (groupIndexFromStart === -1) return '';
      // 偶数组（0,2,4...）标浅蓝，其余不标记
      return groupIndexFromStart % 2 === 0 ? 'band-blue' : '';
    }

    // 表单数据
    const headerSearchForm = reactive<SearchForm & {
      volumeNum: string;
      steelGrade: string;
      inletWidth: string;
      entryThickness: string;
    }>({
      productionLine: '',
      variableDescription: '',
      variableName: '',
      start: '',
      end: '',
      volumeNum: '',
      steelGrade: '',
      inletWidth: '',
      entryThickness: ''
    });
    // 宽度分档范围选项
    const widthRangeOptions = ref([
      { label: '[0,1000)', value: '0' },
      { label: '[1000,1250)', value: '1' },
      { label: '[1250,1450)', value: '2' },
      { label: '[1450,1650)', value: '3' },
      { label: '[1650,1850)', value: '4' },
      { label: '[1850,2050)', value: '5' },
      { label: '[2050,9999)', value: '6' }
    ])

    // 厚度分档范围选项
    const thicknessRangeOptions = ref([
      { label: '[0.25,0.325)', value: '0' },
      { label: '[0.325,0.375)', value: '1' },
      { label: '[0.375,0.425)', value: '2' },
      { label: '[0.425,0.475)', value: '3' },
      { label: '[0.475,0.575)', value: '4' },
      { label: '[0.575,0.675)', value: '5' },
      { label: '[0.675,0.825)', value: '6' },
      { label: '[0.825,0.925)', value: '7' },
      { label: '[0.925,1.05)', value: '8' },
      { label: '[1.05,1.25)', value: '9' },
      { label: '[1.25,1.55)', value: '10' },
      { label: '[1.55,1.85)', value: '11' },
      { label: '[1.85,2.1)', value: '12' },
      { label: '[2.1,2.60)', value: '13' },
      { label: '[2.60,9.9)', value: '14' }
    ])

    const dialogVisible = ref<boolean>(false);

    // 功率显示：前面原始值(取整)，括号内显示百分比（S1:5470, S2-S5:7800）
    function calcPowerPercent(value: any, isS1: boolean): string {
      if (value === null || value === undefined || value === '-' || value === '') return '-';
      const num = Number(value);
      if (!Number.isFinite(num)) return '-';
      const base = isS1 ? 5470 : 7800;
      const pct = Math.round((num / base) * 100);
      return `${Math.round(num)}(${pct}%)`;
    }

    // 表格数据
    const tableData = ref([
      {
        coilNumber: 'M23132184C',
        coilGrade: 'SPCC-1DW',
        inWidth: '920',
        inThickness: '2.8',
        outWidth: '920',
        outThickness: '0.6',
        planTime: '2024-01-01 08:00:00',
        ZS1: '950.23',
        ZS2: '718.24',
        ZS3: '665.81',
        ZS4: '610.8',
        ZS5: '410.99',
        ZHS1: '13.4',
        ZHS2: '18.94',
        ZHS3: '13.86',
        ZHS4: '10.25',
        ZHS5: '7.74'

      }
    ]);

    const rollingProcedureTable = ref([
      {
        ITEM: "工作辊直径",
        UNIT: "mm",
        S1: "460",
        S2: "460",
        S3: "460",
        S4: "460",
        S5: "460"

      }
    ]);

    const simulationResultOutTable = ref([
      {
        ITEM: "速度",
        UNIT: "m/min",
        BEFORE: "/",
        STD1: "355",
        STD2: "515",
        STD3: "728",
        STD4: "975",
        STD5: "1273"

      }, {
        ITEM: "速度",
        UNIT: "m/min",
        BEFORE: "/",
        STD1: "355",
        STD2: "515",
        STD3: "728",
        STD4: "975",
        STD5: "1273"

      }, {
        ITEM: "速度",
        UNIT: "m/min",
        BEFORE: "/",
        STD1: "355",
        STD2: "515",
        STD3: "728",
        STD4: "975",
        STD5: "1273"

      }, {
        ITEM: "速度",
        UNIT: "m/min",
        BEFORE: "/",
        STD1: "355",
        STD2: "515",
        STD3: "728",
        STD4: "975",
        STD5: "1273"

      }, {
        ITEM: "速度",
        UNIT: "m/min",
        BEFORE: "/",
        STD1: "355",
        STD2: "515",
        STD3: "728",
        STD4: "975",
        STD5: "1273"

      }, {
        ITEM: "速度",
        UNIT: "m/min",
        BEFORE: "/",
        STD1: "355",
        STD2: "515",
        STD3: "728",
        STD4: "975",
        STD5: "1273"

      }, {
        ITEM: "速度",
        UNIT: "m/min",
        BEFORE: "/",
        STD1: "355",
        STD2: "515",
        STD3: "728",
        STD4: "975",
        STD5: "1273"

      }, {
        ITEM: "速度",
        UNIT: "m/min",
        BEFORE: "/",
        STD1: "355",
        STD2: "515",
        STD3: "728",
        STD4: "975",
        STD5: "1273"

      }
    ]);

    const option: EChartsOption = {
      xAxis: {
        splitLine: {     //网格线
          "show": false
        },
        axisLabel: {
          fontSize: 14 // 设置字体大小为14
        },
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        name: '轧制力/kN',
        nameTextStyle: {
          fontSize: '10px',
          color: "#6d7882",
        },
        splitLine: {     //网格线
          "show": false
        },
        axisLabel: {
          fontSize: 10 // 设置字体大小为14
        },
      },
      series: [
        {
          type: 'bar',
          data: [23, 24, 18, 25, 27, 28, 25]
        }
      ]
    };
    const option1: EChartsOption = {
      xAxis: {
        splitLine: {     //网格线
          "show": false
        },
        axisLabel: {
          fontSize: 14 // 设置字体大小为14
        },
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        name: '强力/kN',
        nameTextStyle: {
          fontSize: '10px',
          color: "#6d7882",
        },
        splitLine: {     //网格线
          "show": false
        },
        axisLabel: {
          fontSize: 10 // 设置字体大小为14
        },
      },
      series: [
        {
          type: 'bar',
          data: [23, 24, 18, 25, 27, 28, 25]
        }
      ]
    };
    const option2: EChartsOption = {
      xAxis: {
        splitLine: {     //网格线
          "show": false
        },
        axisLabel: {
          fontSize: 14 // 设置字体大小为14
        },
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        name: '速度[m/min]',
        nameTextStyle: {
          fontSize: '10px',
          color: "#6d7882",
        },
        splitLine: {     //网格线
          "show": false
        },
        axisLabel: {
          fontSize: 10 // 设置字体大小为14
        },
      },
      series: [
        {
          type: 'bar',
          data: [23, 24, 18, 25, 27, 28, 25]
        }
      ]
    };
    const option3: EChartsOption = {
      xAxis: {
        splitLine: {     //网格线
          "show": false
        },
        axisLabel: {
          fontSize: 14 // 设置字体大小为14
        },
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        name: '功率/kW',
        nameTextStyle: {
          fontSize: '10px',
          color: "#6d7882",
        },
        splitLine: {     //网格线
          "show": false
        },
        axisLabel: {
          fontSize: 10 // 设置字体大小为14
        },
      },
      series: [
        {
          type: 'bar',
          data: [23, 24, 18, 25, 27, 28, 25]
        }
      ]
    };

    const dataSourceType = ref('');


    const dataSourceTypeOptions = ref([
      { label: 'PLC', value: 'PLC' },
      { label: '传感器', value: '传感器' },
      { label: 'AI算法', value: 'AI算法' },
      { label: '称重传感器', value: '称重传感器' },
      { label: '电池管理系统', value: '电池管理系统' },
    ]);

    // 分页数据
    const pagination = reactive({
      currentPage: 1,
      pageSize: 30,
      total: tableData.value.length,
    });

    // 窗口大小变化处理
    const handleResize = () => {
      nextTick(() => {
        // 这里可以添加表格自适应高度的逻辑
      });
    };

    // 弹窗基本信息
    const dialogBaseInfoList = ref<any[]>([]);
    // 弹窗轧制规程参数表
    const dialogProcedureTable = ref<any[]>([]);
    // 仿真计算结果表
    const dialogSimulationTable = ref<any[]>([]);
    // 修改 handleCheck
    const handleCheck = (row: any) => {
      // 基本信息
      dialogBaseInfoList.value = [
        { label: '出口卷号', value: row.coilno ?? '-' },
        { label: '钢种', value: row.steelGrade ?? '-' },
        { label: '入口宽度(mm)', value: row.enWidth ?? '-' },
        { label: '入口厚度(mm)', value: row.enThick ?? '-' },
        { label: '出口宽度(mm)', value: row.exWidth ?? '-' },
        { label: '出口厚度(mm)', value: row.exThick ?? '-' },
        { label: '屈服强度(MPa)', value: row.yp ?? '-' },
        { label: '屈服强度索引分档号', value: row.ypIndex ?? '-' },
        { label: '宽度索引分档号', value: row.widIndex ?? '-' },
        { label: '厚度索引分档号', value: row.thkIndex ?? '-' },
      ];
      // 轧制规程参数表 S5-S1
      dialogProcedureTable.value = [
        { ITEM: '工作辊弯辊力', S5: row.wbEnd5 ?? '-', S4: row.wbEnd4 ?? '-', S3: row.wbEnd3 ?? '-', S2: row.wbEnd2 ?? '-', S1: row.wbEnd1 ?? '-' },
        { ITEM: '中间辊弯辊力', S5: row.imbEnd5 ?? '-', S4: row.imbEnd4 ?? '-', S3: row.imbEnd3 ?? '-', S2: row.imbEnd2 ?? '-', S1: row.imbEnd1 ?? '-' },
        //{ ITEM: '轧制力(kN)', S5: row.rollForce5 ? Math.round(row.rollForce5) : '-', S4: row.rollForce4 ? Math.round(row.rollForce4) : '-', S3: row.rollForce3 ? Math.round(row.rollForce3) : '-', S2: row.rollForce2 ? Math.round(row.rollForce2) : '-', S1: row.rollForce1 ? Math.round(row.rollForce1) : '-' },
        { ITEM: '初始压下率(比变形率)', S5: row.red5 ?? '-', S4: row.red4 ?? '-', S3: row.red3 ?? '-', S2: row.red2 ?? '-', S1: row.red1 ?? '-' },
        // 可继续补充其它1~5参数
      ];
      // 仿真计算结果表 S5-S1
      dialogSimulationTable.value = [
        { ITEM: '厚度(mm)', S5: row.exiTthk5 ?? '-', S4: row.exiTthk4 ?? '-', S3: row.exiTthk3 ?? '-', S2: row.exiTthk2 ?? '-', S1: row.exiTthk1 ?? '-' },
        { ITEM: '速度(m/min)', S5: row.speed5 ?? '-', S4: row.speed4 ?? '-', S3: row.speed3 ?? '-', S2: row.speed2 ?? '-', S1: row.speed1 ?? '-' },
        { ITEM: '张力(kN)', S5: row.tenSion5 ?? '-', S4: row.tenSion4 ?? '-', S3: row.tenSion3 ?? '-', S2: row.tenSion2 ?? '-', S1: row.tenSion1 ?? '-' },
        { ITEM: '轧制力(kN)', S5: row.rollingForceSet5 ? Math.round(row.rollingForceSet5) * 10 : '-', S4: row.rollingForceSet4 ? Math.round(row.rollingForceSet4) * 10 : '-', S3: row.rollingForceSet3 ? Math.round(row.rollingForceSet3) * 10 : '-', S2: row.rollingForceSet2 ? Math.round(row.rollingForceSet2) * 10 : '-', S1: row.rollingForceSet1 ? Math.round(row.rollingForceSet1) * 10 : '-' },
        { ITEM: '辊缝(mm)', S5: row.gap5 ?? '-', S4: row.gap4 ?? '-', S3: row.gap3 ?? '-', S2: row.gap2 ?? '-', S1: row.gap1 ?? '-' },
        { ITEM: '功率(kW)', S5: calcPowerPercent(row.motorPower5, false), S4: calcPowerPercent(row.motorPower4, false), S3: calcPowerPercent(row.motorPower3, false), S2: calcPowerPercent(row.motorPower2, false), S1: calcPowerPercent(row.motorPower1, true) },
        { ITEM: '机架辊缝差', S5: row.delTgap5 ?? '-', S4: row.delTgap4 ?? '-', S3: row.delTgap3 ?? '-', S2: row.delTgap2 ?? '-', S1: row.delTgap1 ?? '-' },
        { ITEM: '机架轧制力差', S5: row.delForce5 ?? '-', S4: row.delForce4 ?? '-', S3: row.delForce3 ?? '-', S2: row.delForce2 ?? '-', S1: row.delForce1 ?? '-' },
        { ITEM: '机架速度差', S5: row.delftSpeed5 ?? '-', S4: row.delftSpeed4 ?? '-', S3: row.delftSpeed3 ?? '-', S2: row.delftSpeed2 ?? '-', S1: row.delftSpeed1 ?? '-' },
        { ITEM: '压下率计算值', S5: row.redsFinal5 ?? '-', S4: row.redsFinal4 ?? '-', S3: row.redsFinal3 ?? '-', S2: row.redsFinal2 ?? '-', S1: row.redsFinal1 ?? '-' },
      ];
      // 柱形图横轴S5-S1，数据接入当前行
      option.xAxis = { ...option.xAxis, data: ['S5', 'S4', 'S3', 'S2', 'S1'] };
      option.series = [
        { name: '轧制力', type: 'bar', data: [Math.round(row.rollForce5 ?? 0), Math.round(row.rollForce4 ?? 0), Math.round(row.rollForce3 ?? 0), Math.round(row.rollForce2 ?? 0), Math.round(row.rollForce1 ?? 0)] }
      ];
      option1.xAxis = { ...option1.xAxis, data: ['S5', 'S4', 'S3', 'S2', 'S1'] };
      option1.series = [
        { name: '张力', type: 'bar', data: [row.tenSion5 ?? 0, row.tenSion4 ?? 0, row.tenSion3 ?? 0, row.tenSion2 ?? 0, row.tenSion1 ?? 0] }
      ];
      option2.xAxis = { ...option2.xAxis, data: ['S5', 'S4', 'S3', 'S2', 'S1'] };
      option2.series = [
        { name: '速度', type: 'bar', data: [Math.round(row.speed5 ?? 0), Math.round(row.speed4 ?? 0), Math.round(row.speed3 ?? 0), Math.round(row.speed2 ?? 0), Math.round(row.speed1 ?? 0)] }
      ];
      option3.xAxis = { ...option3.xAxis, data: ['S5', 'S4', 'S3', 'S2', 'S1'] };
      option3.series = [
        { name: '功率', type: 'bar', data: [Math.round(row.motorPower5 ?? 0), Math.round(row.motorPower4 ?? 0), Math.round(row.motorPower3 ?? 0), Math.round(row.motorPower2 ?? 0), Math.round(row.motorPower1 ?? 0)] }
      ];
      dialogVisible.value = true;
      nextTick(() => {
        barOptions[0].series[0].data = [
          Math.round(row.rollForce5 ?? 0),
          Math.round(row.rollForce4 ?? 0),
          Math.round(row.rollForce3 ?? 0),
          Math.round(row.rollForce2 ?? 0),
          Math.round(row.rollForce1 ?? 0)
        ];
        barOptions[1].series[0].data = [
          row.tenSion5 ?? 0,
          row.tenSion4 ?? 0,
          row.tenSion3 ?? 0,
          row.tenSion2 ?? 0,
          row.tenSion1 ?? 0
        ];
        barOptions[2].series[0].data = [
          Math.round(row.speed5 ?? 0),
          Math.round(row.speed4 ?? 0),
          Math.round(row.speed3 ?? 0),
          Math.round(row.speed2 ?? 0),
          Math.round(row.speed1 ?? 0)
        ];
        barOptions[3].series[0].data = [
          Math.round(row.motorPower5 ?? 0),
          Math.round(row.motorPower4 ?? 0),
          Math.round(row.motorPower3 ?? 0),
          Math.round(row.motorPower2 ?? 0),
          Math.round(row.motorPower1 ?? 0)
        ];
        disposeCharts();
        renderCharts();
      });
    }

    // 获取表格数据
    const fetchTableData = async (onlyPage = false) => {
      try {
        let params: any = onlyPage
          ? {
            pageIndex: String(pagination.currentPage),
            pageSize: String(pagination.pageSize)
          }
          : {
            pageIndex: String(pagination.currentPage),
            pageSize: String(pagination.pageSize)
          };
        if (!onlyPage) {
          // 只传有值的查询条件
          if (headerSearchForm.volumeNum) params.volumeNum = headerSearchForm.volumeNum;
          if (headerSearchForm.steelGrade) params.steelGrade = headerSearchForm.steelGrade;
          // 宽度分档范围：选择后传入前面的数字
          if (headerSearchForm.inletWidth) params.inletWidth = headerSearchForm.inletWidth;
          // 厚度分档范围：选择后传入前面的数字
          if (headerSearchForm.entryThickness) params.entryThickness = headerSearchForm.entryThickness;
          if (headerSearchForm.start) params.startDate = headerSearchForm.start;
          if (headerSearchForm.end) params.endDate = headerSearchForm.end;
        }
        const res = await rollingSimulationApi.getAcidPlanData(params);
        if (res && res.data && Array.isArray(res.data.data)) {
          tableData.value = res.data.data.map((item: any) => ({ ...item }));
          pagination.total = res.data.count || res.data.data.length;
          ElMessage.success(res.data.msg || '查询成功');
        } else {
          tableData.value = [];
          pagination.total = 0;
          ElMessage.info(res?.data?.msg || '未查询到数据');
        }
      } catch (error) {
        ElMessage.error('获取数据失败');
        tableData.value = [];
        pagination.total = 0;
      }
    };

    // 查询方法
    const handleSearch = () => {
      pagination.currentPage = 1;
      fetchTableData();
    };

    // 重置方法
    const handleReset = () => {
      headerSearchForm.volumeNum = '';
      headerSearchForm.steelGrade = '';
      headerSearchForm.inletWidth = '';
      headerSearchForm.entryThickness = '';
      headerSearchForm.start = '';
      headerSearchForm.end = '';
      handleSearch();
    };


    // 删除方法
    const handleDelete = (row: any) => {
      // 这里添加删除逻辑
      console.log('删除', row);
    };

    // 分页大小变化
    const handleSizeChange = (val: number) => {
      pagination.pageSize = val;
      fetchTableData();
    };

    // 页码变化
    const handleCurrentChange = (val: number) => {
      pagination.currentPage = val;
      fetchTableData();
    };

    // 生命周期钩子
    onMounted(() => {
      fetchTableData(true);
      window.addEventListener('resize', handleResize);
    });

    onUnmounted(() => {
      window.removeEventListener('resize', handleResize);
    });

    const form = reactive({
      name: '',
      region: '',
      date1: '',
      date2: '',
      delivery: false,
      type: [],
      resource: '',
      desc: '',
    })

    // 表格字段配置（除recCreateTime外）
    const tableColumns = [
      { prop: 'coilno', label: '出口卷号' },
      { prop: 'steelGrade', label: '钢种' },
      { prop: 'enWidth', label: '入口宽度(mm)' },
      { prop: 'enThick', label: '入口厚度(mm)' },
      { prop: 'exWidth', label: '出口宽度(mm)' },
      { prop: 'exThick', label: '出口厚度(mm)' },
      { prop: 'yp', label: '屈服强度(MPa)' },
      { prop: 'ypIndex', label: '屈服强度索引分档号' },
      { prop: 'widIndex', label: '宽度索引分档号' },
      { prop: 'thkIndex', label: '厚度索引分档号' },
      { prop: 'wbEnd1', label: '1#工作辊弯辊力' },
      { prop: 'wbEnd2', label: '2#工作辊弯辊力' },
      { prop: 'wbEnd3', label: '3#工作辊弯辊力' },
      { prop: 'wbEnd4', label: '4#工作辊弯辊力' },
      { prop: 'wbEnd5', label: '5#工作辊弯辊力' },
      { prop: 'imbEnd1', label: '1#中间辊弯辊力' },
      { prop: 'imbEnd2', label: '2#中间辊弯辊力' },
      { prop: 'imbEnd3', label: '3#中间辊弯辊力' },
      { prop: 'imbEnd4', label: '4#中间辊弯辊力' },
      { prop: 'imbEnd5', label: '5#中间辊弯辊力' },
      { prop: 'rollForce1', label: 'S1轧制力(kN)' },
      { prop: 'rollForce2', label: 'S2轧制力(kN)' },
      { prop: 'rollForce3', label: 'S3轧制力(kN)' },
      { prop: 'rollForce4', label: 'S4轧制力(kN)' },
      { prop: 'rollForce5', label: 'S5轧制力(kN)' },
      { prop: 'rollingForceSet1', label: '1#轧制力设定值' },
      { prop: 'rollingForceSet2', label: '2#轧制力设定值' },
      { prop: 'rollingForceSet3', label: '3#轧制力设定值' },
      { prop: 'rollingForceSet4', label: '4#轧制力设定值' },
      { prop: 'rollingForceSet5', label: '5#轧制力设定值' },
      { prop: 'tenSion1', label: '1#张力(kN)' },
      { prop: 'tenSion2', label: '2#张力(kN)' },
      { prop: 'tenSion3', label: '3#张力(kN)' },
      { prop: 'tenSion4', label: '4#张力(kN)' },
      { prop: 'tenSion5', label: '5#张力(kN)' },
      { prop: 'forSlip1', label: '1#前滑(%)' },
      { prop: 'forSlip2', label: '2#前滑(%)' },
      { prop: 'forSlip3', label: '3#前滑(%)' },
      { prop: 'forSlip4', label: '4#前滑(%)' },
      { prop: 'forSlip5', label: '5#前滑(%)' },
      { prop: 'speed1', label: 'S1入口速度(m/min)' },
      { prop: 'speed2', label: 'S2入口速度(m/min)' },
      { prop: 'speed3', label: 'S3入口速度(m/min)' },
      { prop: 'speed4', label: 'S4入口速度(m/min)' },
      { prop: 'speed5', label: 'S5入口速度(m/min)' },
      { prop: 'exiTthk1', label: 'S1出口厚度(mm)' },
      { prop: 'exiTthk2', label: 'S2出口厚度(mm)' },
      { prop: 'exiTthk3', label: 'S3出口厚度(mm)' },
      { prop: 'exiTthk4', label: 'S4出口厚度(mm)' },
      { prop: 'exiTthk5', label: 'S5出口厚度(mm)' },
      { prop: 'fricTionCoef1', label: '1#摩擦系数' },
      { prop: 'fricTionCoef2', label: '2#摩擦系数' },
      { prop: 'fricTionCoef3', label: '3#摩擦系数' },
      { prop: 'fricTionCoef4', label: '4#摩擦系数' },
      { prop: 'fricTionCoef5', label: '5#摩擦系数' },
      { prop: 'rollRadiu1', label: '1#轧辊工作辊直径(mm)' },
      { prop: 'rollRadiu2', label: '2#轧辊工作辊直径(mm)' },
      { prop: 'rollRadiu3', label: '3#轧辊工作辊直径(mm)' },
      { prop: 'rollRadiu4', label: '4#轧辊工作辊直径(mm)' },
      { prop: 'rollRadiu5', label: '5#轧辊工作辊直径(mm)' },
      { prop: 'motorPower1', label: '1#功率(kW)' },
      { prop: 'motorPower2', label: '2#功率(kW)' },
      { prop: 'motorPower3', label: '3#功率(kW)' },
      { prop: 'motorPower4', label: '4#功率(kW)' },
      { prop: 'motorPower5', label: '5#功率(kW)' },
      { prop: 'gap1', label: '1#辊缝(mm)' },
      { prop: 'gap2', label: '2#辊缝(mm)' },
      { prop: 'gap3', label: '3#辊缝(mm)' },
      { prop: 'gap4', label: '4#辊缝(mm)' },
      { prop: 'gap5', label: '5#辊缝(mm)' },
      { prop: 'delTgap1', label: '1#机架辊缝差' },
      { prop: 'delTgap2', label: '2#机架辊缝差' },
      { prop: 'delTgap3', label: '3#机架辊缝差' },
      { prop: 'delTgap4', label: '4#机架辊缝差' },
      { prop: 'delTgap5', label: '5#机架辊缝差' },
      { prop: 'red1', label: '1#初始压下率(比变形率)' },
      { prop: 'red2', label: '2#初始压下率(比变形率)' },
      { prop: 'red3', label: '3#初始压下率(比变形率)' },
      { prop: 'red4', label: '4#初始压下率(比变形率)' },
      { prop: 'red5', label: '5#初始压下率(比变形率)' },
      { prop: 'delForce1', label: '1#机架轧制力差' },
      { prop: 'delForce2', label: '2#机架轧制力差' },
      { prop: 'delForce3', label: '3#机架轧制力差' },
      { prop: 'delForce4', label: '4#机架轧制力差' },
      { prop: 'delForce5', label: '5#机架轧制力差' },
      { prop: 'delftSpeed1', label: '1#机架速度差' },
      { prop: 'delftSpeed2', label: '2#机架速度差' },
      { prop: 'delftSpeed3', label: '3#机架速度差' },
      { prop: 'delftSpeed4', label: '4#机架速度差' },
      { prop: 'delftSpeed5', label: '5#机架速度差' },
      { prop: 'redsFinal1', label: '1#压下率计算值' },
      { prop: 'redsFinal2', label: '2#压下率计算值' },
      { prop: 'redsFinal3', label: '3#压下率计算值' },
      { prop: 'redsFinal4', label: '4#压下率计算值' },
      { prop: 'redsFinal5', label: '5#压下率计算值' },
    ];

    // 时间戳格式化方法
    function formatDate(val: number | string) {
      if (!val) return '-';
      const date = new Date(Number(val));
      if (isNaN(date.getTime())) return '-';
      const y = date.getFullYear();
      const m = String(date.getMonth() + 1).padStart(2, '0');
      const d = String(date.getDate()).padStart(2, '0');
      const h = String(date.getHours()).padStart(2, '0');
      const min = String(date.getMinutes()).padStart(2, '0');
      const s = String(date.getSeconds()).padStart(2, '0');
      return `${y}-${m}-${d} ${h}:${min}:${s}`;
    }

    return {
      headerSearchForm,
      tableData,
      pagination,
      handleSearch,
      handleReset,
      handleCheck,
      handleDelete,
      handleSizeChange,
      handleCurrentChange,
      dataSourceTypeOptions,
      dataSourceType,
      dialogVisible,
      form,
      rollingProcedureTable,
      simulationResultOutTable,
      option,
      option1,
      option2,
      option3,
      tableColumns,
      formatDate,
      dialogBaseInfoList,
      dialogProcedureTable,
      dialogSimulationTable,
      barRef0,
      barRef1,
      barRef2,
      barRef3,
      barOptions,
      renderCharts,
      widthRangeOptions,
      thicknessRangeOptions,
      calcPowerPercent,
      bandCellClassName,
    };
  },
});
</script>
<style scoped lang="less">
.msg-title {
  top: -4vh;
  left: 39.5vw;
  background-image: -webkit-linear-gradient(left, #0072ff, #00eaff, #01aaff);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 2vh;
  font-weight: bolder;
  width: 10vw;
}

:deep(.el-table .cell) {
  line-height: 14px
}

::v-deep .el-table--enable-row-transition .el-table__body td {
  padding-top: 4px;
  padding-bottom: 4px;
}

/* 竖向分组底色：从出口厚度开始，每5列一组，仅高亮第 0/2/4... 组 */
::v-deep(.band-blue) { background-color: #f3f8ff !important; }
</style>
